<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人主页</title>
<script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $(".meun-item").click(function() {
                    $(".meun-item").removeClass("meun-item-active");
                    $(this).addClass("meun-item-active");
                    var itmeObj = $(".meun-item").find("img");
                    itmeObj.each(function() {
                        var items = $(this).attr("src");
                        items = items.replace("_grey.png", ".png");
                        items = items.replace(".png", "_grey.png")
                        $(this).attr("src", items);
                    });
                    var attrObj = $(this).find("img").attr("src");
                    ;
                    attrObj = attrObj.replace("_grey.png", ".png");
                    $(this).find("img").attr("src", attrObj);
                });
                $("#topAD").click(function() {
                    $("#topA").toggleClass(" glyphicon-triangle-right");
                    $("#topA").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topBD").click(function() {
                    $("#topB").toggleClass(" glyphicon-triangle-right");
                    $("#topB").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topCD").click(function() {
                    $("#topC").toggleClass(" glyphicon-triangle-right");
                    $("#topC").toggleClass(" glyphicon-triangle-bottom");
                });
                $(".toggle-btn").click(function() {
                    $("#leftMeun").toggleClass("show");
                    $("#rightContent").toggleClass("pd0px");
                })
            })
        </script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <link rel="stylesheet" type="text/css" href="css/slide.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
    </head>

    <body>
        <div id="wrap">
            <!-- 左侧菜单栏目块 -->
            <div class="leftMeun" id="leftMeun">
                <div id="logoDiv">
                    <p id="logoP"><img id="logo" alt="个人中心" src="images/logo.png"><span>个人中心</span></p>
                </div>
                <div id="personInfor">
                
                    <p id="userName" class="loginName">
                <%-- <c:forEach items="user" var="u">   --%>                              
                      ${u.username}
                <%-- </c:forEach> --%>
                    </p>
                    <p>
                        <a href="ReturnToHomePage">返回主页</a>
                    </p>
                    <p>
                        <a>退出登录</a>
                    </p>
                </div>
                <div class="meun-title">管理</div>
                <div class="meun-item meun-item-active" href="#sour" aria-controls="sour" role="tab" data-toggle="tab"><img src="images/icon_source.png">个人信息</div>
				<div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab"><img src="images/icon_user_grey.png">订单详情</div>
                <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"><img src="images/icon_change_grey.png">个人信息修改</div>
            </div>
						
            <!-- 右侧具体内容栏目 -->
            <div id="rightContent">
                <a class="toggle-btn" id="nimei">
                    <i class="glyphicon glyphicon-align-justify"></i>
                </a>
                <!-- Tab panes -->
                <div class="tab-content">
									
                    <!-- 个人信息管理模块 -->
                    <div role="tabpanel" class="tab-pane active" id="sour">
											<div class="check-div form-inline">
												<div class="col-xs-3">
													<button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addSource">修改个人信息 </button>
												</div>
												<!-- <div class="col-xs-4">
													<input type="text" class="form-control input-sm" placeholder="输入文字搜索">
													<button class="btn btn-white btn-xs ">查 询 </button>
												</div> -->
											</div>
											<!-- 个人信息  页面内容 -->
											 <div class="data-div">
													<div class="row tableHeader">
															<div class="col-xs-2 ">
																	个人名称
															</div>
															<div class="col-xs-2 ">
																	性别
															</div>
															<div class="col-xs-2">
																	联系方式
															</div>
															<div class="col-xs-2">
																	地址
															</div>
															<div class="col-xs-2">
																	密码
															</div>
													</div>
													 <%-- <c:forEach items="${user}" var="u"> --%>
													<div class="tablebody">
													   
														<div class="row">
																<div class="col-xs-2 ">
																		${u.username}
																</div>
																<div class="col-xs-2">
																		${u.sex}
																</div>
																<div class="col-xs-2">
																		${u.user_phone}
																</div>
																<div class="col-xs-2">
																		${u.user_address}
																</div>
																<div class="col-xs-2">
																		*************
																</div>
														</div>
														
													</div>
													<%-- </c:forEach> --%>
											</div>
			
			
											
											<div class="modal fade" id="addSource" role="dialog" aria-labelledby="gridSystemModalLabel">
													<div class="modal-dialog" role="document">
													    
															<div class="modal-content">
																	<div class="modal-header">
																			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
																			<h4 class="modal-title" id="gridSystemModalLabel">个人信息修改</h4>
																			<h5>${Description}</h5>
																	</div>
																	<form class="form-horizontal" action="updateUserById" method="post">
																	<div class="modal-body">
																			<div class="container-fluid">
																					<!-- <form class="form-horizontal"> -->
																					        <input type="hidden" id="user_id" name="user_id" value="${u.user_id}">
																							<div class="form-group ">
																									<label for="sName" class="col-xs-3 control-label" class="bookName" >新名称：</label>
																									<div class="col-xs-8 ">
																											<input type="text" id="username" name="username" placeholder="旧名称：${u.username}">
																									</div>
																							</div>
																							<div class="form-group">
																									<label for="sLink" class="col-xs-3 control-label">新性别：</label>
																									<div class="col-xs-8 ">
																											<input type="text" id="sex" name="sex" placeholder="旧性别：${u.sex }">
																									</div>
																							</div>
																							<div class="form-group">
																									<label for="sOrd" class="col-xs-3 control-label">新联系电话：</label>
																									<div class="col-xs-8">
																											<input type="text" id="user_phone" name="user_phone" placeholder="旧联系电话：${u.user_phone}">
																									</div>
																							</div>
																							<div class="form-group">
																								<label for="sOrd" class="col-xs-3 control-label">新地址：</label>
																								<div class="col-xs-8">
																									<input type="text" id="user_address" name="user_address" placeholder="旧地址：${u.user_address}">
																								</div>
																							</div>
																							<!-- <div class="form-group">
																								<label for="sOrd" class="col-xs-3 control-label">图片：</label>
																								<div class="col-xs-8">
																									<input type="file" class="duiqi" id="sOrd" placeholder="" />
																								</div>
																							</div> -->
																					<!-- </form> -->
																			</div>
																	</div>
																	<div class="modal-footer">
																			<button type="button" class="btn btn-xs btn-xs btn-white" data-dismiss="modal">取 消</button>
																			<button type="submit" class="btn btn-xs btn-xs btn-green">保 存</button>
																	</div>
																	<!-- <input type="submit" value="提交"> -->
																	</form>
															</div>
															
													</div> 
											</div>
											<!-- </form> -->
									</div>


            <!--订单模块-->
            <div role="tabpanel" class="tab-pane" id="user">
                <div class="check-div form-inline">
                    <div class="col-xs-4">
                        <!-- <input type="text" class="form-control input-sm" placeholder="输入文字搜索">
                        <button class="btn btn-white btn-xs ">查 询 </button> -->
                    </div>
                </div>
                <div class="data-div">
                    <div class="row tableHeader">
												<div class="col-xs-2 ">
														订单id
												</div>
                        <div class="col-xs-2 ">
                            姓名
                        </div>
                        <div class="col-xs-2">
                            送餐地址
                        </div>
                        <div class="col-xs-2">
                            电话
                        </div>
												<div class="col-xs-2">
														订单状态
												</div>
                        <div class="col-xs-2">
                            
                        </div>
                    </div>
                    <div class="tablebody">

											<c:forEach var="o" items="${sessionScope.om}">
										
											<div class="row">
													<div class="col-xs-2 ">
															${o.order_id}
													</div>
													<div class="col-xs-2">
															${o.buyer_name}
													</div>
													<div class="col-xs-2">
															${o.buyer_address}
													</div>
													<div class="col-xs-2">
															${o.buyer_phone}
													</div>
													<div class="col-xs-2">
														<c:if test="${o.order_status==0}">未接单</c:if>
														<c:if test="${o.order_status==1}">已接单</c:if>   
													</div>								
											</div>
											</c:forEach>

                    </div>
                </div>
                <!--页码块-->
                <!-- <footer class="footer">
                    <ul class="pagination">
                        <li>
                            <select>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                            页
                        </li>
                        <li class="gray">
                            共20页
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-menu-left">
                            </i>
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-menu-right">
                            </i>
                        </li>
                    </ul>
                </footer> -->
               
                <!--弹出删除用户警告窗口-->
                <div class="modal fade" id="deleteUser" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <!-- <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    确定要删除该订单？删除后不可恢复！
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn  btn-xs btn-danger">保 存</button>
                            </div>
                        </div> -->
                    </div>   
                </div>
            </div>
						
						
			<!-- 订单详情模块 -->
			<div role="tabpanel" class="tab-pane" id="orderMassage">
                <div class="check-div form-inline">
                    <div class="col-xs-3">
                        <button class="btn btn-yellow btn-xs" href="#user" aria-controls="user" role="tab" data-toggle="tab" >返回</button>
                    </div>
                </div>
                <div class="data-div">
                    <div class="row tableHeader">
												<div class="col-xs-2 ">
														订单id
												</div>
                        <div class="col-xs-2 ">
                            菜名
                        </div>
                        <div class="col-xs-2">
                            价格
                        </div>
                        <div class="col-xs-2">
                           数量
                        </div>	
                    </div>
                    <div class="tablebody">
                                      		<c:forEach var="om" items="${sessionScope.om}"> 
                                      		<c:forEach var="od" items="${om.od}"> 
											<div class="row">
											
													<div class="col-xs-2 ">
													        ${od.order_id}
															<!-- 2019521150811+0000+id -->
													</div>
													<div class="col-xs-2">
															${od.product_name}
															<!-- 红烧排骨 -->
													</div>
													<div class="col-xs-2">
															${od.product_price}
															<!-- 99 -->
													</div>
													<div class="col-xs-2">
															${od.product_quantity}
															<!-- 1 -->
													</div>
											
											</div>
											</c:forEach>
											</c:forEach>
                    </div>
										<<!-- div class="col-xs-2">
												<button class="btn btn-success btn-xs" href="#user" aria-controls="user" role="tab" data-toggle="tab">确认订单</button>
												<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteUser">取消订单</button>
										</div> -->
                </div>
            </div>												
						
            <!-- 个人密码修改模块 -->
            <div role="tabpanel" class="tab-pane" id="chan">
                <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                    <form class="form-horizontal" action="updateUserByIdOnPassword" method="post">
                        <input type="hidden" id="user_id" name="user_id" value="${u.user_id}">
                        <input type="hidden" id="password" name="passwrod" value="${u.password}">
                        ${prompt}
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">原密码：</label>
                            <div class="col-xs-5">
                                <input type="text" id="pasw" name="pasw" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">新密码：</label>
                            <div class="col-xs-5">
                                <input type="text" id="pw" name="pw" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">重复密码：</label>
                            <div class="col-xs-5">
                                <input type="text" id="passwords" name="passwords" >
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                <button type="submit" class="btn btn-xs btn-green">保存</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="js/jquery.nouislider.js"></script>


<script>

	function huadong(my, unit, def, max) {
		$(my).noUiSlider({
			range: [0, max],
			start: [def],
			handles: 1,
			connect: 'upper',
			slide: function() {
				var val = Math.floor($(this).val());
				$(this).find(".noUi-handle").text(
						val + unit
						);
				console.log($(this).find(".noUi-handle").parent().parent().html());
			},
			set: function() {
				var val = Math.floor($(this).val());
				$(this).find(".noUi-handle").text(
						val + unit
						);
			}
		});
		$(my).val(def, true);
	}
	huadong('.slider-minmax1', "分钟", "5", 30);
	huadong('.slider-minmax2', "分钟", "6", 15);
	huadong('.slider-minmax3', "分钟", "10", 60);
	huadong('.slider-minmax4', "次", "2", 10);
	huadong('.slider-minmax5', "天", "3", 7);
	huadong('.slider-minmax6', "天", "8", 10);
</script>
</body>
</html>